<!-- 申请冲红 -->
<template>
	<a-modal v-bind="options">
		<a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
			<a-form-item label="冲红的发票号码" name="invoiceNo" v-if="props.isRecording">
				<a-input v-model:value="formData.invoiceNo" placeholder="请输入发票号" :maxlength="20" />
			</a-form-item>

			<a-form-item label="冲红原因" name="redReason">
				<a-textarea :rows="8" placeholder="请输入冲红原因" v-model:value="formData.redReason" show-count :maxlength="100" />
			</a-form-item>
		</a-form>

		<template #footer>
			<a-button @click="options.onCancel">取消</a-button>
			<a-button type="primary" :loading="loading" @click="sure">确定</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, watch, toRef} from 'vue'
	import {
		invoicingRedF,
		invoicingDetails,
		resubmitRedInvoicing,
		historicalInvoicingRedF,
		historicalRedEdit
	} from '@/api/invoicing-history'
	import {ValidateErrorEntity} from 'ant-design-vue/es/form/interface'

	const props = defineProps<{
		id?: string
		processInstanceId?: string
		visible: boolean
		isSpecialTicket?: boolean
		// 重新提交
		resubmitId?: string
		invoiceKind?: string | number
		isRecording?: boolean
		recordingId?: string
	}>()

	const loading = ref(false)
	const emits = defineEmits(['update:visible', 'close', 'success'])
	const formRef = ref()
	const options = reactive({
		// isSpecialTicket true  表示是专票
		title: '申请冲红',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('close')
		}
	})
	const sure = () => {
		formRef.value
			.validate()
			.then(() => {
				loading.value = true
				if (!props.resubmitId) {
					// 冲红补录
					if (props.isRecording) {
						historicalInvoicingRedF({
							invoiceNo: formData.invoiceNo,
							redReason: formData.redReason,
							invoiceInfoId: props.id
						})
							.then((res: any) => {
								loading.value = false
								emits('success')
								emits('close')
							})
							.catch(() => {
								loading.value = false
							})
					} else {
						//冲红
						invoicingRedF({
							redReason: formData.redReason,
							invoiceInfoId: props.id
						})
							.then((res: any) => {
								loading.value = false
								emits('success')
								emits('close')
							})
							.catch(() => {
								loading.value = false
							})
					}
				} else {
					// 重新提交
					let req = resubmitRedInvoicing
					let params: any = {
						redReason: formData.redReason,
						id: props.resubmitId
					}

					// 补录重新提交
					if (props.isRecording) {
						req = historicalRedEdit
						delete params.id
						params.invoiceInfoId = props.recordingId
						params.invoiceNo = formData.invoiceNo
					}

					req(params)
						.then(() => {
							loading.value = false
							emits('success')
							emits('close')
						})
						.catch(() => {
							loading.value = false
						})
				}

				// console.log('values', formState, toRaw(formState))
			})
			.catch((error: ValidateErrorEntity<FormState>) => {
				console.log('error', error)
			})
	}
	interface FormState {
		redReason: string
	}
	const formData = reactive({
		invoiceNo: null,
		redReason: ''
	})

	const rules = {
		invoiceNo: [{required: true, message: '请输入发票号'}],
		redReason: [{required: true, message: '请输入冲红原因', trigger: 'change'}]
	}

	watch(
		() => props.visible,
		() => {
			props.invoiceKind === 2 ? (options.title = '填写冲红表') : (options.title = '申请冲红')

			props.isRecording ? (options.title = '冲红补录') : ''

			formData.redReason = ''
			if (props.resubmitId) {
				getInvoiceDetails(props.resubmitId)
			}
		}
	)

	//获取发票详情
	const getInvoiceDetails = id => {
		invoicingDetails(id).then((res: any) => {
			formData.invoiceNo = res.data?.invoiceNumberItems ? res.data?.invoiceNumberItems[0] : null
			formData.redReason = res.data?.redReason
		})
	}
</script>

<style scoped></style>
